<%@ page import="java.util.UUID" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/5/8
  Time: 12:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link href="css/style.css" rel="stylesheet"/>

    <link href="css/base.css" rel="stylesheet"/>


    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="js/flexible.min.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>

    <script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js" type="text/javascript"></script>
    <script src="/mobile/qcDiscern/quagga.min.js" type="text/javascript"></script>

    <script src="/layui-v2.4.5/layui/layui.js"></script>
    <title>卖卡</title>
</head>
<style>
    .one_card img {
        width: .5rem;
        height: .5rem;
    }

    .one_card > div {
        display: flex;
        align-items: center;
    }
    /*上部*/
    .card_leixing .card_left{
        height: 40px;
        font-size: 20px;
        color: #000000;
        line-height: 40px;
    }
    .card_leixing .card_left .title{
        width: 2rem;
    }
    .card_leixing .card_left p{

        font-size: 20px;
        color: #000000;
    }
    /*input框样式*/
    /*input占位符样式*/
    ::-webkit-input-placeholder { color:#000; }
    ::-moz-placeholder { color:#000; }
    :-ms-input-placeholder { color:#000; }
    :-moz-placeholder { color:#000; }

    .one_card>.account>.pwds{
        width: 135px;font-size: 20px;
    }
    .one_card>.pwd>.pwds{
        width: 135px;font-size: 20px;
    }
    #cardNumber{
        font-size: 20px; line-height: 45px; height: 55px;color: #000;
    }
    .one_card>.pwd>span{
        width: 70px;font-size: 20px;
    }
    .pwd>input{
        width: 245px;font-size: 20px; line-height: 45px; height: 55px;color: #000;
    }
    /*真实姓名和支付宝input*/
    .pwd>.zhengshi, .pwd>.zhifu{
        font-size: 20px; line-height: 45px; height: 55px;color: #000;
    }
    /*提示框*/
    .prompt{
        width: 80%;
        box-shadow:2px 5px 5px 5px #e7e5e5;
        position: fixed;
        top: 25%;
        left: 10%;
        background-color: #ffffff;
        z-index: 1000;
        font-size: 16px;
        text-align: left;
    }
    .ppt_title{
        padding: 8px 30px;
        background: rgb(242,242,242);

    }
    .ppt_title>span{
        float: right;
    }
    .ppt_conter{
        padding: 10px 30px;

    }
    .ppt_conter>div{
        margin-bottom: 10px;
    }
    .ppt_conter>div span{
        color: #f00;
    }

    .ppt_btn{
        display: flex;
        justify-content: space-evenly;
        margin: 10px 0 0;
    }
    .ppt_btn>div{
        width: 100px;
        text-align: center;
        background: #0e97d6;
        padding: 5px 0;
        color: #fff;

    }
    .ppt_btn>.ppt_qux{
        background: #fff;
        color: #000;
        border: 1px solid #f2f2f2f2;
        margin: 0 0 0  20px;
    }
    #kazhong{

        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        width: 3rem;
        text-align: left;
    }
    .one_card>div input {
        border: none;
        width: 6rem;
    }
    .tijiaodp{
        display: none;
    }
</style>
<body style="background-color: rgb(242,242,242);">
<div id="app" style="">
    <input type="hidden" id="commodityClassId" value="${commodityClassId}"> <%--卡类别ID--%>

    <input type="hidden" id="commodityId" value="${commodityId}"> <%--卡类别ID--%>

    <input type="hidden" id="feedbackId" value="${feedbackId}"> <%--卡类别ID--%>
    <input type="hidden" id='hasCardNumber2' value="${hasCardNumber2}">
    <input type="hidden" id='cardNumberSize2' value="${cardNumberSize2}">
    <input type="hidden" id='cardPasswordSize2' value="${cardPasswordSize2}">
    <script>

        $(
            function setCardNumberHide2() {
                var hasCardNumber2 = $('#hasCardNumber2').val();
                var cardNumberSize = $('#cardNumberSize2').val();
                var cardPasswordSize = $('#cardPasswordSize2').val();

                if (hasCardNumber2 == '1') {

                    $('.account').hide();
                    $('#cards').prop('placeholder', '卡密之间用逗号隔开');

                } else {
                    $('#hasCardNumber').val(0);
                    $('.account').show();
                    $('#cards').prop('placeholder', '卡号与卡密之间用逗号隔开,每张卡为一行\n例如 123456,78978963');

                }

                if (cardNumberSize != 99&&cardNumberSize!='') {
                    $('#cardNumber').attr('placeholder', '卡号不超过' + cardNumberSize + '位');
                    $("#cardNumber").attr({maxlength: cardNumberSize});
                }
                if (cardPasswordSize != 99&&cardPasswordSize!='') {
                    $('#cardPassword').attr('placeholder', '密码不超过' + cardPasswordSize + '位');
                    $('#cardPassword').attr({maxlength: cardPasswordSize});
                }

            }
        );

        function setCardNumberHide(hasCardNumber2, cardNumberSize, cardPasswordSize) {
            $('#hasCardNumber2').val(hasCardNumber2);
            if (hasCardNumber2 == '1') {

                $('.account').hide();
                $('#cards').prop('placeholder', '卡密之间用逗号隔开');

            } else {
                $('#hasCardNumber').val(0);
                $('.account').show();
                $('#cards').prop('placeholder', '卡号与卡密之间用逗号隔开,每张卡为一行');

            }
            if (cardNumberSize != 99&&cardNumberSize!='') {
                $('#cardNumber').attr('placeholder', '卡号不超过' + cardNumberSize + '位');
                $("#cardNumber").attr({maxlength: cardNumberSize});
            }
            if (cardPasswordSize != 99&&cardPasswordSize!='') {
                $('#cardPassword').attr('placeholder', '密码不超过' + cardPasswordSize + '位');
                $('#cardPassword').attr({maxlength: cardPasswordSize});
            }





        }
    </script>

    <div>
        <div>
            <div class="card_leixing" id="one">
                <div class="card_left"><p class="title">卡类</p>
                    <p id="pCommodityClass">${commodityClassName}</p></div>
                <div class="card_right"><img id="classImg" src="${commodityClass.logo}"> ></div>
            </div>
            <div class="card_leixing" id="two">
                <div class="card_left"><p class="title">卡种</p>
                    <p id="kazhong">${commodityName}</p></div>
                <div class="card_right"> ></div>
            </div>
            <div class="card_leixing" id="three">
                <div class="card_left"><p class="title">面值</p>
                    <p id="mianzhi">请选择单张面值</p></div>

                <div class="card_right"> ></div>
            </div>
        </div>
        <!-- tab-->
        <div class="tab">
            <div class="tab_card">
                <div class="on">单卡提交</div>
                <div>批量提交</div>
            </div>
            <div class="conten">
                <div class="one_card">

                    <div class="result-qrcode">
                    </div>
                    <div class="account"><span class="pwds" style="">卡号</span>
                        <input id="cardNumber" placeholder="请输入卡号" class="input" style=" ">
                        <div id="btnIdents" class="qr-btn" node-type="qr-btn" style=" width: 75px;
    height: .8rem;
    line-height: .8rem;">
                            <%--<input multiple="multiple" accept="image/*" capture=camera" capture="camera"--%>
                                <%--node-type="jsbridge" type="file" id="sean1" name="myPhoto"--%>
                                <%--style="width:0px; display: none;font-size: 20px;line-height: 45px;height: 55px;"/>--%>
                            <%--<img style="    padding-right: 5px;padding-left: -40px;width: 53px;height: 30px;margin-left: -28px;"--%>
                                 <%--src="img/hy765.png" id="img" onclick="myTest()"/>--%>
                            <script>
                                function myTest() {
                                    $('#sean1').trigger('click');

                                }

                                function myTest2() {
                                    $('#sean2').trigger('click');

                                }

                            </script>
                        </div>
                    </div>
                    <div class="pwd"><span style="">卡密</span><input id="cardPassword" placeholder="请输入卡密"
                                                                               class="input" style="">
                        <div class="qr-btn" node-type="qr-btn" style=" width: 0px;height: .8rem;line-height: .8rem;">
                            <%--<img style="    padding-right: 5px;padding-left: -30px;width: 53px;height: 30px;margin-left: -28px;"--%>
                                 <%--src="img/hy765.png" onclick="myTest2()"/>--%>
                            <%--<input multiple="multiple" accept="image/*" capture="camera" node-type="jsbridge"--%>
                                   <%--type="file" id="sean2" name="myPhoto" style="width: 0px; float: left;font-size: 20px; line-height: 45px; height: 55px;"/>--%>
                        </div>

                    </div>

                    <div class="pwd"><span class="pwds" style="">真名</span><input id="realName" placeholder="请输入真实姓名"
                                                                               value="${realName}" class="input zhengshi" style="">
                        <div class="qr-btn" node-type="qr-btn" style=" width: 75px;height: .8rem;line-height: .8rem;">

                        </div>

                    </div>
                    <div class="pwd"><span class="pwds" style="">支付宝</span><input id="alipayAccount" placeholder="请输入支付宝"
                                                                                value="${alipayAccount}" class="input zhifu" style="">
                        <div class="qr-btn" node-type="qr-btn" style=" width: 75px;height: .8rem;line-height: .8rem;">

                        </div>

                    </div>

                    <div class="sipt"><span id="remark" style="width: 100%">${commodity.remark}</span></div>
                </div>
                <div class="two_card">
                    <textarea placeholder="每张卡密为一行，卡号与卡密之间用‘,’隔开" id="cards"></textarea>
                </div>
            </div>
        </div>
        <div class="fixed">

            <div class='sipt_tong' id="four">提交即表示你同意<span><a href="huishou_xieyi.html">《邦邦礼品网礼品转让协议服务条款》</a></span>
            </div>
            <div class='fixed_btn' onclick="one1()">提交</div>
        </div>
    </div>
    <script>
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
        $(window).on('resize', function (e) {
            var nowClientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            // alert(nowClientHeight)
            if (clientHeight > nowClientHeight) {
                // $('#app').css({position: "absolute", top: " -3rem",});
                // $('.fixed').css("bottom", " 0.3rem");
                $('.fount').hide();

                $('.sipt').hide();
                $('.sipt_tong').hide();
                $(".fixed_btn").hide();
            } else {
                // $('#app').css({position: "static", top: " 3rem"});
                // $('.fixed').css("bottom", " 2.4rem");
                $('.fount').show();

                $('.fount').show();
                $('.sipt').show();
                $('.sipt_tong').show();
                $(".fixed_btn").show();
            }
        });


    </script>

    <div class="fount">
        <div>
            <a href="/mobile/index">
                <img src="img/home1.png">
                <div>首页</div>
            </a>

        </div>
        <div>
            <a href="/mobile/classification">
                <img src="img/hy123.png">
            </a>
            <div>分类</div>
            </a>
        </div>
        <div>
            <a href="/mobile/sellCard">
                <img src="img/hy111.png">
                <div class="active">卖卡</div>
            </a>
        </div>
        <div>
            <a href="/mobile/toMyInfo">
                <img src="img/my.png">
                <div>我的</div>
            </a>
        </div>

    </div>
</div>


<!--卡类-->
<div class="card_posi">
    <div class="card_list">
        <div class="card_posi_title">
            <div></div>
            <div>请选择卡的种类</div>
            <div><img src="img/hy23.png" class="contact_pop_up1"></div>
        </div>
        <div class="list">
            <ul>
                <c:forEach items="${classList}" var="cl">
                    <li onclick="getCommodity('${cl.id}','${cl.name}','${cl.logo}','${remark}');"><img
                            src="${cl.logo}">${cl.name}</li>
                </c:forEach>
            </ul>
        </div>
    </div>

    <script>

        function getCommodity(id, name, imgPath, remark) {

            console.log(id);
            console.log(name);

            //alert(remark);

            $("#commodityClassId").val(id);
            $("#pCommodityClass").html(name);
            $("#classImg").attr("src", imgPath);
            $("#remark").html(remark);
            $.ajax({
                url: '/mobile/cardList',
                type: 'POST', //GET
                async: true,    //或false,是否异步
                data: {
                    commodityClassId: id
                },
                timeout: 5000,    //超时时间
                dataType: 'html',    //返回的数据格式：json/xml/html/script/jsonp/text
                beforeSend: function (xhr) {
                    /*console.log(xhr)
                     console.log('发送前')*/
                },
                success: function (reData) {

                    $("#card_posi1").empty();

                    $("#card_posi2").empty();

                    $("#card_posi1").append(reData);

                    $("#mianzhi").text("");

                    $("#feedbackId").val("");
                },
                error: function (xhr, textStatus) {
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
                complete: function () {
                    //console.log('结束')
                }
            });
        }


    </script>
</div>
<!--卡种-->
<div class="card_posi1" id="card_posi1">

    <div class="card_list">
        <div class="card_posi_title">
            <div></div>
            <div>请选择卡的种类</div>
            <div><img src="img/hy23.png" class="contact_pop_up"></div>
        </div>
        <div class="list1">
            <ul class="recycling1">

                <c:forEach items="${commodityList}" var="commodity">
                    <li onclick="getFaceValue('${commodity.id}','${commodity.hasCardNumber}','${commodity.remark}','${commodity.cardNumberSize}','${commodity.cardPasswordSize}');"
                        @click="zhonglei"><a>
                        <img src="${commodity.imgPath}">
                        <div class="recyling_card1"><span id="hexiaodanbendan">${commodity.name}</span></div>
                        <div class="recyling_discount1">${commodity.discount}</div>
                    </a>
                    </li>
                </c:forEach>
                <script>
                    function two1() {
                        $("#tijiao").addClass("tijiaodp")
                        console.log(111)

                    }
                    function one1() {
                        var hasCardNumber = $('#hasCardNumber').val();
                        var hasCardNumber = $('#hasCardNumber').val();
                        var hasCardNumber2=$('#hasCardNumber2').val();
                        hasCardNumber= typeof(hasCardNumber)=='undefined'?hasCardNumber2:hasCardNumber;
                        if (0 == type) {//单卡提交

                            if (notEmpty($("#commodityId").val()) == false) {

                                console.log($("#commodityId").val());
                                alert("请选择具体卡项");
                                return false;
                            }
                            ;

                            if (notEmpty($("#feedbackId").val()) == false) {

                                alert("请选择具体面值");

                                return false;
                            }
                            ;

                            if (hasCardNumber == '0') { //有卡号
                                if (notEmpty($("#cardNumber").val()) == false) {

                                    alert("请输入卡号");

                                    return false;
                                }else {

                                    var maxlength=$("#cardNumber").attr("maxlength");

                                    console.log("卡号长度为:"+maxlength);

                                    if (maxlength!=null && maxlength!=99 && maxlength!=''){//设定过属性

                                        if ($.trim($("#cardNumber").val()).length!=maxlength){
                                            alert("请输入"+maxlength+"位的卡号");
                                            return false;
                                        }
                                    }
                                }
                            }


                            if (notEmpty($.trim($("#cardPassword").val())) == false) {

                                alert("请输入卡密码");

                                return false;
                            }else {

                                var maxlength=$("#cardPassword").attr("maxlength");

                                console.log("卡号长度为:"+maxlength);

                                if (maxlength!=null && maxlength!=99 && maxlength!=''){//设定过属性

                                    if ($("#cardPassword").val().length!=maxlength){
                                        alert("请输入"+maxlength+"位的密码");
                                        return false;
                                    }
                                }
                            }


                        } else {//批量提交

                            if (notEmpty($("#commodityId").val()) == false) {

                                alert("请选择具体卡项");

                                return false;
                            }
                            ;

                            if (notEmpty($("#feedbackId").val()) == false) {

                                alert("请选择具体面值");

                                return false;
                            }
                            ;

                            if (notEmpty($("#cards").val()) == false) {

                                alert("请输入卡信息");

                                return false;
                            }
                            ;


                        }
                        $("#tijiao").removeClass("tijiaodp")
                        console.log(this.state)


                    }
                    function getFaceValue(id, hasCardNumber2, remark, cardNumberSize, cardPasswordSize) {


                        $("#mianzhi").text("");

                        $("#feedbackId").val("");

                        $("#commodityId").val(id);
                        setCardNumberHide(hasCardNumber2,cardNumberSize,cardPasswordSize);
                        $('#remark').text(remark);

                        $.ajax({
                            url: '/mobile/getFaceVlaue',
                            type: 'POST', //GET
                            async: true,    //或false,是否异步
                            data: {
                                commodityId: id
                            },
                            timeout: 5000,    //超时时间
                            dataType: 'html',    //返回的数据格式：json/xml/html/script/jsonp/text
                            beforeSend: function (xhr) {
                                /*console.log(xhr)
                                 console.log('发送前')*/
                            },
                            success: function (reData) {

                                console.log(reData);
                                $("#card_posi2").empty();
                                $("#card_posi2").append(reData);
                            },
                            error: function (xhr, textStatus) {
                                console.log(15);
                                console.log('错误')
                                console.log(xhr)
                                console.log(textStatus)
                            },
                            complete: function () {

                                //console.log('结束')
                            }
                        });

                    }


                </script>
            </ul>
        </div>
    </div>
</div>
<!--面值-->
<div class="card_posi2" id="card_posi2">


    <div class="card_posi2_list">

        <div class="mianzhiList">
            <ul>

                <c:forEach items="${faceValueList}" var="faceValue">
                    <li onclick="mianzhi('${faceValue.id}','${faceValue.faceValue}')">
                        <div class="top">${faceValue.faceValue}</div>
                        <div class="top_bottom">
                            ¥<fmt:formatNumber value="${faceValue.faceValue*faceValue.discount}"
                                               pattern="#,#00.0#"/><span>${faceValue.discount}折</span></div>
                    </li>
                </c:forEach>

            </ul>

        </div>
    </div>
    <script>
        function mianzhi(id, value) {

            //alert(title);
            $("#mianzhi").text(value);

            $("#feedbackId").val(id);

            $('.card_posi2_list').slideUp()
            $('.card_posi2').fadeOut()
        };

    </script>


</div>
<div class='prompt tijiaodp' id="tijiao">
    <div class='ppt_title'>提交确定 <span onclick="two1()">X</span></div>
    <div class='ppt_conter'>
        <div>尊敬的用户:</div>
        <div>您将要提交卡类为:<span id="tijiaokalei">${commodityClassName}</span></div>
        <div>卡种为:<span id="tijiaokazhong">${commodityName}</span></div>
        <div>面值:<span id="tijiaomianzhi"></span></div>
        <div>注意:<span style="color: #f00;">切记面值不符,损失自负</span></div>
        <div class='ppt_btn'>
            <div  onclick="saveCard()">确定提交</div>
            <div class='ppt_qux' onclick="two1()">返回修改</div>
        </div>
    </div>
</div>
<!-- 协议-->
<div class="card_posi3">
    <div class="card_posi3_list">
        <div class="card_posi_title">
            <div></div>
            <div>请确定以下协议在提交</div>
            <div><img src="img/hy23.png" class="contact_pop_up3"></div>
        </div>
        <div class="mianzhiList">
            <div class="one1" @click="one1"><img src="img/hy50.png" v-if="state ==1"><img src="img/hy51.png"
                                                                                          v-if="state==0">
                <div>我已阅读接受【<span>礼品卡出售协议</span>】和【<span>礼品卡回收说明</span>】</div>
            </div>
            <div class="two1" @click="two1"><img src="img/hy51.png" v-if="state ==1"><img src="img/hy50.png"
                                                                                          v-if="state ==0">
                <div>我确认该卡号卡密<span>来源合法</span>，如有问题，本人愿意承担一切法律责任</div>
            </div>
            <div class="card_posi3_btn">提交</div>
        </div>
    </div>
</div>
</div>
<%--提示框样式--%>
<style>
    html, body {
        margin: 0;
        padding: 0;
        font-family: "Microsoft YaHei";
    }

    .wrap-dialog {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: 16px;
        text-align: center;
        background-color: rgba(0, 0, 0, .4);
        z-index: 999;
    }

    .dialog {
        position: relative;
        margin: 55% auto;
        width: 300px;
        height: 200px;
        background-color: #FFFFFF;
        text-align: left;
    }

    .dialog .dialog-header {
        height: 20px;
        padding: 20px;
        font-size: 21px;
    }

    .dialog .dialog-body {
        height: 100px;
        padding: 10px 10px 10px 20px;
        color: rgb(102, 102, 102);
    }

    .dialog .dialog-footer {
        padding: 8px 0 0 45px;
        display: flex;
    }

    .btn {
        width: 70px;
        padding: 2px;

    }

    .hide {
        display: none;
    }

    .ml50 {
        margin-left: 50px;
        color: rgba(48, 150, 45, 0.87);
    }
</style>
<div class="wrap-dialog hide">
    <div class="dialog">
        <div class="dialog-header">
            <span class="dialog-title">恭喜您，提交成功</span>
        </div>
        <div class="dialog-body">
            <span class="dialog-message">转让已经受理。<br>校验成功后，转让资金会直接转入您的支付宝</span>
        </div>
        <div class="dialog-footer">
            <%--<input type="button" class="btn " id="cancel" value="继续转让" />--%>
            <%--<input type="button" class="btn ml50" id="confirm" value="转让记录" />--%>
            <div class="btn " id="cancel">继续转让</div>
            <div class="btn ml50" id="confirm">转让记录</div>

        </div>
    </div>
</div>
<script>
    function tishi() {
        var message = "转让已经受理。<br>校验成功后，转让资金会直接转入您的支付宝";
        dialogBox(message,
            function () {
                console.log("转让记录");
                window.location.href = "/mobile/toTradeRecordPage"

            },
            function () {
                console.log("继续转让");
                // do something
                $("#cardNumber").val('');
                $("#cardPassword").val('');
                $("#cardNumber").prop("placeholder", "请输入卡号");
                $("#cardPassword").prop("placeholder", "请输入卡密");
            }
        );
    };

    function dialogBox(message, yesCallback, noCallback) {
        if (message) {
            $('.dialog-message').html(message);
        }
        // 显示遮罩和对话框
        $('.wrap-dialog').removeClass("hide");
        // 确定按钮
        $('#confirm').click(function () {
            $('.wrap-dialog').addClass("hide");
            yesCallback()
        });
        // 取消按钮
        $('#cancel').click(function () {
            $('.wrap-dialog').addClass("hide");
            noCallback()
        });
    }
</script>


</body>



<script>
    var layer=null;
    layui.use('layer', function(){
        layer = layui.layer;

    });


</script>


<script type="text/javascript">
    var type = 0;//单卡
    window.onload = function () {
        new Vue({
            el: '#app',
            data: {
                state: 0,
                leixing: '',
                zhonglei: ''
            },
            methods: {

                one1: function () {
                    this.state = 1
                },
                two1: function () {
                    this.state = 0
                },
                //类型
                card_lei: function (id, name) {

                }
            }
        })
        Vue.nextTick(function () {

            $('#two').click(function () {

                $('.card_list').slideDown()

                $('.card_posi1').fadeIn()

            })

            $('.recycling1 li').click(function (e) {

                var title = e.currentTarget.childNodes[0].children[1].innerText;
                //alert(title);

                $("#kazhong").text(title);

                $('.card_list').slideUp()

                $('.card_posi1').fadeOut()
            })
            //关闭蒙层
            $('.card_posi1').click(function (e) {
                //弹框显示的内容
                var _con = $(this).find('.card_list')
                var _dis = $('.contact_pop_up1')
                if (!_con.is(e.target) && _con.has(e.target).length === 0) {
                    $('.card_list').slideUp()
                    $('.card_posi1').fadeOut()
                }
            })
            $('.contact_pop_up').click(function () {
                $('.card_list').slideUp()
                $('.card_posi1').fadeOut()
            })


            //    选项卡
            $('.conten>div').eq(0).show();

            $('.tab_card>div').click(function () {
                var index = $(this).index();
                type = index;
                $(this).addClass('on')
                $(this).siblings().removeClass('on')
                $('.conten>div').eq(index).show();
                $('.conten>div').eq(index).siblings().hide()
            })

            //
            $('#one').click(function () {
                $('.card_list').slideDown()
                $('.card_posi').fadeIn()
            })
            $('.contact_pop_up1').click(function () {
                $('.card_list').slideUp()
                $('.card_posi').fadeOut()
            })
            $('.card_posi').click(function (e) {
                var _con = $(this).children('.card_list')
//        !$(e.target).closest(".pop_up").length
                if (!_con.is(e.target) && _con.has(e.target).length === 0) {
                    $('.card_list').slideUp()
                    $('.card_posi').fadeOut()

                }
            })
            $('.list li').click(function (e) {
                $('.card_list').slideUp()
                $('.card_posi').fadeOut()
            })

            //面值
            $('#three').click(function () {
                $('.card_posi2_list').slideDown()
                $('.card_posi2').fadeIn()
            })

            function mianzhi(id, value) {

                //alert(title);
                $("#mianzhi").text(value);

                $("#feedbackId").val(id);

                $('.card_posi2_list').slideUp()
                $('.card_posi2').fadeOut()
            };
            //关闭蒙层
            $('.card_posi2').click(function (e) {
                console.log(11)
                var _con = $(this).children('.card_posi2_list')
//        !$(e.target).closest(".pop_up").length
                if (!_con.is(e.target) && _con.has(e.target).length === 0) {
                    $('.card_posi2_list').slideUp()
                    $('.card_posi2').fadeOut()

                }
            })
            $('.contact_pop_up2').click(function () {
                $('.card_posi2_list').slideUp()
                $('.card_posi2').fadeOut()
            })
        })

        /*识别条形码*/


        var App = {
            // init: function() {
            //     App.attachListeners();
            // },

            attachListeners: function () {
                var self = this;
                $("#sean1").on("change", function (e) {
                    console.log(e);
                    var input = document.querySelector("input[type=file]");
                    if (input.files && input.files.length) {
                        App.decode(URL.createObjectURL(input.files[0]), "cardNumber");
                    }
                });

                $("#sean2").on("change", function (e) {
                    console.log(e);
                    var input = document.querySelector("input[type=file]");
                    if (input.files && input.files.length) {
                        App.decode(URL.createObjectURL(input.files[0]), "cardPassword");
                    }
                });

            },
            decode: function (src, id) {
                var self = this,
                    config = $.extend({}, self.state, {src: src});
                Quagga.decodeSingle(config, function (result) {
                    console.log(result.codeResult.code)
                    //识别结果
                    if (result.codeResult) {
                        console.log(id);
                        $("#" + id).val(result.codeResult.code)
                        //alert("图片中的条形码为：" + result.codeResult.code );
                    } else {
                        alert("未识别到图片中的条形码！");
                        //$("#wenzi").html("未识别到图片中的条形码！")
                    }

                });
            },
            state: {
                inputStream: {
                    size: 800,
                    singleChannel: false
                },
                locator: {
                    patchSize: "medium",
                    halfSample: true
                },
//          , 'code_39_reader','code_128_reader',"ean_reader",
                decoder: {
                    readers: [{
                        format: ['ean_reader'], //条形码种类很多,选择适合自己的
                        config: {}
                    }]
                },
                locate: true,
                src: null
            }
        };

        // App.init();
        App.attachListeners();


    }


</script>
<script>
    $(document).ready(function () {
//    four
        $('#four').click(function () {
            $('.card_posi3_list').slideDown()
            $('.card_posi3').fadeIn()
        })
        //关闭蒙层
        $('.card_posi3').click(function (e) {
            console.log(11)
            var _con = $(this).children('.card_posi3_list')
//        !$(e.target).closest(".pop_up").length
            if (!_con.is(e.target) && _con.has(e.target).length === 0) {
                $('.card_posi3_list').slideUp()
                $('.card_posi3').fadeOut()

            }
        })
        $('.contact_pop_up3').click(function () {
            $('.card_posi3_list').slideUp()
            $('.card_posi3').fadeOut()
        })
    })


</script>

<script>
    /**
     * 校验长度是否符合要求
     * @param value
     */
    function enoughLength(value) {
        var result = false;


    }

    //判断空值
    function notEmpty(value) {
        console.log(value);
        var result = false;
        if ("" != value && value != null) {
            result = true;
        }
        console.log(result);
        return result;
    }


    //保存礼品卡
    function saveCard() {
        var hasCardNumber = $('#hasCardNumber').val();
        var hasCardNumber2=$('#hasCardNumber2').val();
       hasCardNumber= typeof(hasCardNumber)=='undefined'?hasCardNumber2:hasCardNumber;

        var cardNumberSize = $('#cardNumberSize').val();
        var cardPasswordSize = $('#cardPasswordSize').val();
        if (0 == type) {//单卡提交

            if (notEmpty($("#commodityId").val()) == false) {

                console.log($("#commodityId").val());
                alert("请选择具体卡项");
                return false;
            }
            ;

            if (notEmpty($("#feedbackId").val()) == false) {

                alert("请选择具体面值");

                return false;
            }
            ;

            if (hasCardNumber == '0') { //有卡号
                if (notEmpty($("#cardNumber").val()) == false) {


                    alert("请输入卡号");
                    return false;




                }else {

                    var maxlength=$("#cardNumber").attr("maxlength");

                    console.log("卡号长度为:"+maxlength);

                    if (maxlength!=null && maxlength!=99 && maxlength!=''){//设定过属性

                        if ($("#cardNumber").val().length!=maxlength){
                            alert("请输入"+maxlength+"位的卡号");
                            return false;
                        }
                    }
                }
            }
            ;

            if (notEmpty($("#cardPassword").val()) == false) {

                alert("请输入卡密码");



                return false;



            }else {

                var maxlength=$("#cardPassword").attr("maxlength");

                console.log("卡号长度为:"+maxlength);

                if (maxlength!=null && maxlength!=99 && maxlength!=''){//设定过属性

                    if ($("#cardPassword").val().length!=maxlength){
                        alert("请输入"+maxlength+"位的密码");
                        return false;
                    }
                }
            }


        } else {//批量提交

            if (notEmpty($("#commodityId").val()) == false) {

                alert("请选择具体卡项");

                return false;
            }
            ;

            if (notEmpty($("#feedbackId").val()) == false) {

                alert("请选择具体面值");

                return false;
            }
            ;

            if (notEmpty($("#cards").val()) == false) {

                alert("请输入卡信息");

                return false;
            }
        }
        console.log(123)
        layer.load(1);
        console.log(456)
        $.ajax({
            url: '/mobile/saveCard',
            type: 'POST', //GET
            async: true,    //或false,是否异步
            data: {
                commodityId: $("#commodityId").val(),
                feedbackId: $("#feedbackId").val(),
                cardNumber: $("#cardNumber").val(),
                cardPassword: $("#cardPassword").val(),
                alipayAccount: $('#alipayAccount').val(),
                realName: $('#realName').val(),
                cards: $("#cards").val(),
                type: type,
                hasCardNumber: hasCardNumber
            },
            timeout: 5000,    //超时时间
            dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
            beforeSend: function (xhr) {
                /*console.log(xhr)
                 console.log('发送前')*/

            },
            success: function (reData) {
                $("#tijiao").addClass("tijiaodp")
                layer.closeAll('loading');
                if ("000000" == reData.code) {//保存成功，去交易记录页面
                    tishi()

                } else {
                    alert(reData.msg);
                }
            },
            error: function (xhr, textStatus) {
                $("#tijiao").addClass("tijiaodp")
                console.log('错误')
                console.log(xhr)
                console.log(textStatus)
                layer.closeAll('loading');
            },
            complete: function () {
                $("#tijiao").addClass("tijiaodp")
                //console.log('结束')
                layer.closeAll('loading');
            }
        });

    }


</script>


</html>
